<template>
    <div>
        <div>
            <h4 class="font-weight-bold">接口测试</h4>
            <p> This page is an example of basic layout. For more options use
                <strong>Vue starter template generator</strong> in the docs.</p>
        </div>
        <b-card header="企查查-企业工商数据查询：企业关键字多维度查询" header-tag="span" class="mb-4">
            <Row>
                <i-col span="12">
                    <Form ref="testInterfaceForm" :model="testInterfaceForm" :rules="formRule" :label-width="100">
                        <FormItem label="示例：">
                            <Row>
                                <i-col span="24">
                                    查询维度： 公司名，注册号和信用代码<br>
                                    关键字(公司名)： 深圳市一体医疗科技有限公司<br>
                                    关键字(统一社会信用代码)： 91440300715219110K
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="查询维度" prop="type">
                            <Row>
                                <i-col span="12">
                                    <Select v-model="testInterfaceForm.type" style="width:200px">
                                        <Option v-for="item in dimensionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="查询关键字" prop="keyWord">
                            <Row>
                                <i-col span="12">
                                    <i-input v-model="testInterfaceForm.keyWord" placeholder="请输入查询关键字"></i-input>
                                </i-col>
                            </Row>
                        </FormItem>

                        <FormItem label="省份代码" prop="province">
                            <Row>
                                <i-col span="12">
                                    <i-input v-model="testInterfaceForm.province" placeholder="请输入省份代码"></i-input>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="12">
                                    <label style="color:red">如：江苏为“JS”</label>
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="默认页码" prop="pageIndex">
                            <Row>
                                <i-col span="2">
                                    <i-input v-model="testInterfaceForm.pageIndex" placeholder="页码，默认第1页"></i-input>
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem label="每页条数" prop="pageSize">
                            <Row>
                                <i-col span="2">
                                    <i-input v-model="testInterfaceForm.pageSize" placeholder="每页条数，默认10条，最大不超过50条"></i-input>
                                </i-col>
                            </Row>
                            <Row>
                                <i-col span="12">
                                    <label style="color:red">默认10条，最大不超过50条</label>
                                </i-col>
                            </Row>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="loadData()">提交</Button>
                        </FormItem>
                    </Form>
                </i-col>
                <i-col span="12">
                    <div class="result">
                        <tree-view :data="result" :options="{maxDepth: 3}"></tree-view>
                    </div>
                </i-col>
            </Row>

        </b-card>
    </div>
</template>

<style scoped>
.result {
    width: 100%;
    height: 100%;
    border: 2px dashed gray;
    min-height: 480px;
    background-color: cornsilk;
    padding: 10px;
}
</style>


<script>
import Axios from "axios";
export default {
    name: "TestInterface",
    data() {
        return {
            result: { code: 200 },
            testInterfaceForm: {
                dtype: "json",
                type: "name",
                keyWord: "",
                pageIndex: 1,
                pageSize: 10,
                province: ""
            },
            formRule: {
                keyWord: [
                    {
                        required: true,
                        message: "搜索关键字不能为空",
                        trigger: "blur"
                    }
                ]
            },
            dimensionList: [
                {
                    value: "name",
                    label: "公司名，注册号和信用代码"
                },
                {
                    value: "opername",
                    label: "法人"
                },
                {
                    value: "employeelist",
                    label: "高管"
                },
                {
                    value: "featurelist",
                    label: "品牌产品"
                },
                {
                    value: "address",
                    label: "地址"
                },
                {
                    value: "scope",
                    label: "经营范围"
                }
            ]
        };
    },

    created() {},
    methods: {
        loadData: function() {
            let vm = this;
            
            if(vm.testInterfaceForm.keyWord.trim() == ''){
                return false;
            }
            
            Axios.post(
                "/app/v1/apis/4/result",
                this.testInterfaceForm
            )
            .then(
                function(res) {
                    let resp = res.data; // HTTP响应数据
                    let status = res.status; // HTTP响应状态
                    // console.log(res);
                    vm.result = res.data;
                },
                function(err) {}
            )
            .catch(function(err) {});
        }
    }
};
</script>
